<template>
    <div>
        <!-- 单个 -->
        <div v-if="cellList.separate" class="separate" >
        <van-cell :value="cellList.content" is-link @click="sendEvent(cellList)">
  <template #title>
     <svg class="icon center" aria-hidden="true" :style="'color:'+cellList.color" v-if="cellList.icon">
      <use :xlink:href="cellList.icon"></use>
    </svg>
    <span>{{cellList.describe}}</span>
  </template>
  <!-- 右侧switch开关 -->
  <template #right-icon v-if="cellList.switch">
   <van-switch v-model="cellList.checked" active-color="#07c160" inactive-color="#d7d7d7" size=".7rem"  @change="switchChange(cellList)"/>
  </template>
  <!-- 右侧图片加tip -->
  <template #right-icon v-else-if="cellList.iconTip">
      <van-icon :name="cellList.avatar" :dot='cellList.showTip' style="marginRight:.1rem;" size="1.2rem"/>
      <van-icon name="arrow" class="van-cell__right-icon" />
  </template>
</van-cell>
</div>

    <!-- 多个 -->
    <div v-else class="separate">
        <van-cell :value="item.content" center :label="item.label" is-link v-for="(item,index) in cellList.moreList" :key="index" @click="sendEvent(item)">
  <!-- title-->
  <template #title>
     <svg class="icon center" aria-hidden="true" :style="'color:'+item.color" v-if="item.icon">
      <use :xlink:href="item.icon"></use>
    </svg>
    <span>{{item.describe}}</span>
  </template>
  <!-- 右侧switch开关 -->
  <template #right-icon v-if="item.switch">
   <van-switch v-model="item.checked" active-color="#07c160" inactive-color="#d7d7d7" size=".7rem" @change="switchChange(item)" />
  </template>
  <!-- 右侧图片加tip -->
  <template #right-icon v-else-if="item.iconTip">
      <van-icon :name="item.avatar" :dot='item.showTip' style="marginRight:.1rem;" size="1.2rem"/>
      <van-icon name="arrow" class="van-cell__right-icon" />
  </template>
    <!-- 右侧图片上传 -->
  <template #right-icon v-else-if="item.upLoad">
      <van-uploader :after-read='afterRead'>
          <van-image
            width="1.5rem"
            height="1.5rem"
            fit="cover"
            :src="item.avatar"
            radius=".2rem"
            />
    </van-uploader>
      <van-icon name="arrow" class="van-cell__right-icon" />
  </template>
</van-cell>
    </div>
    </div>
</template>

<script>
export default {
    props:{
        itemList:{
           separate:Boolean,
            content:String,
            icon:String,
            describe:String,
            switch:Boolean,
            checked:Boolean,
            iconTip:Boolean,
            upLoad:Boolean,
            event:String,
            avatar:String
        }
        },
        data(){
            return{
                cellList:[]
            }
        },
        created(){
            this.cellList=this.itemList
        },
       methods:{
        sendEvent(e){
            this.$emit('sendEvent', e.event)
        },
         afterRead(file) {
             this.$emit('upLoadEvent',file)
        },
        switchChange(e){
            this.$emit('switchChange',e)
        }
       }
    }
    
</script>

<style scoped>
    .van-cell{
        padding: .7rem .3rem;
        font-size: .65rem;
    }
    .icon{
        margin-right: .2rem;
        font-size: .8rem;
    }
    .separate{
        margin-bottom: .4rem;
    }
    .van-cell__value{
        text-overflow:ellipsis; 
        white-space: nowrap;
    }
    .van-cell__label{
        width: 12rem;
        overflow:hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
    }
</style>